<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>管理路由</title>
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<link rel="stylesheet" href="__ADMIN_STATIC__/css/oksub.css">
	<script type="text/javascript" src="__STATIC__/lib/loading/okLoading.js"></script>
	<style>
		.drop-select{
			width:100%;
			height:500px;
			overflow: scroll;
		}
		.drop-btn{
			display: flex;
			flex-direction:column;
			align-items:center;
			justify-content: center;
		}
		.drop-btn button{
			margin:2px 0!important;
		}
		.ok-form{
			display: flex;
			align-items:center;
			justify-content: space-around;

		}
		.ok-form > div{
			flex-grow:1;
		}
		.ok-form > .drop-wrap{
			flex-grow:0;
		}
	</style>
</head>
<body>
<div class="ok-body">
	<!--form表单-->
	<div class="layui-row">
		<div class="layui-col-lg6 layui-col-lg-offset3">
			<div class="layui-row">
			<form class="layui-form-pane ok-form" id="drop_form">

				<!--可用路由-->
				<div class="layui-card">
					<label class="layui-card-header">可用路由</label>
					<div class="layui-card-body">
						<select id="not_added" class="drop-select" multiple="multiple">
							　　　　 {foreach $notAdded as $k=>$v }
							<option value="{$v}">{$v}</option>
							{/foreach}
							　　</select>
					</div>
				</div>
				<!--按钮-->
				<div class="layui-card drop-wrap">
					<div class="layui-card-body">
						<div class="layui-form-item drop-btn">
							<button id="add" type="button" class="layui-btn layui-btn-sm"><i class="layui-icon">&#xe602;</i></button>
							<button id="del" type="button" class="layui-btn layui-btn-sm"><i class="layui-icon">&#xe603;</i></button>
							<button id="add_all" type="button" class="layui-btn layui-btn-sm"><i class="layui-icon">&#xe65b;</i></button>
							<button id="del_all" type="button" class="layui-btn layui-btn-sm"><i class="layui-icon">&#xe65a;</i></button>
							<button id="form_btn" type="button" class="layui-btn layui-btn-sm"><i class="layui-icon">&#xe605;</i></button>
						</div>
					</div>
				</div>
				<!--已添加路由-->
				<div class="layui-card">
					<label class="layui-card-header">添加路由</label>
					<div class="layui-card-body">
						<select name="routes" id="added" class="drop-select" multiple="multiple">
							　　　　	{foreach $added as $k=>$v }
							<option value="{$v}">{$v}</option>
							{/foreach}
							　　</select>
					</div>
				</div>

			</form>
			</div>
		</div>
	</div>
</div>
<!--js逻辑-->
<script src="__STATIC__/lib/layui/layui.js"></script>
<script>
	layui.use(["okUtils", "okLayer", 'jquery'], function () {
		let okUtils = layui.okUtils;
		let okLayer = layui.okLayer;
		let $ = layui.jquery;
		okLoading.close();

		//点击提交
		$('#form_btn').on('click', function(){
			var data = [];
			$('#added option').each(function(){
				data.push($(this).text());
			});
			okUtils.ajax("{:url('permission/saveRoute')}", "post", {permissions:data}, true).done(function (response) {
				okLayer.greenTickMsg(response.msg, function () {
					parent.layer.close(parent.layer.getFrameIndex(window.name));
				});
			}).fail(function (error) {
				console.log(error)
			});
			return false;
		});

		/*事件*/
		$('#drop_form option').dblclick(function () {
			if(this.parentNode.id === 'not_added'){
				$(this).appendTo($('#added'));
			}else{
				$(this).appendTo($('#not_added'));
			}
		});
		//添加
		$('#add').on('click', function () {
			$("#not_added option:selected").appendTo($('#added'));
		});
		//删除
		$('#del').on('click', function () {
			$("#added option:selected").appendTo($('#not_added'));
		});
		//添加全部
		$('#add_all').on('click', function () {
			$("#not_added option").appendTo($('#added'));
		});
		//删除全部
		$('#del_all').on('click', function () {
			$("#added option").appendTo($('#not_added'));
		});

	});
</script>
</body>
</html>
